<template>
  <div class="logincontent">
    <h2>
      <i class="iconfont icon-shouji"></i>
      <input type="text" placeholder="请输入手机号" v-model="phoneNum" @keyup="phone()"/>
      <span>中国</span>
      <i class="iconfont icon-xiajiantou"></i>
    </h2>
    <h3>
      <i class="iconfont icon-yanzhengma"></i>
      <input type="text" placeholder="请输入验证码" v-model="yzm" />
      <i>获取验证码</i>
    </h3>
    <h4>若您输入的手机号未注册，将会进入到注册流程。</h4>
    <h5>
      <input type="submit" value="登录" class="logon1">
    </h5>
    <div class="forget">忘记密码？</div>
    <h6>
      <input type="radio" />
      <span>请仔细阅读并同意</span>
      <span>《用户协议》《隐私政策》</span>
    </h6>
    
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data(){
    return{
      phoneNum:"",
      yzm:""
    }
  },
  methods:{
    phone(){
        console.log(this.phoneNum)
        if((this.phoneNum).length==11){
          let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
          if (phoneReg.test(this.phoneNum==false)) {
            alert('手机号输入错误');
          } else {
            console.log("错了");
            $(".logon1").css({"background-color":"#FF2661"})
          }
        }
      }
  }
};
</script>

<style scoped>
.icon-yanzhengma{
  color: black;
}
.forget {
  padding-right: 0.4rem;
  height: 0.4rem;
  color: #999;
  text-align: right;
}
h6 {
  padding: 0 0.4rem;
  font-size: 0.12rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
h6 span:nth-child(2) {
  padding-left: 0.08rem;
  color: #999;
}
h5 {
  width: 100%;
  height: 0.7rem;
  line-height: 0.5rem;
  text-align: center;
}
.logon1 {
  font-size: 0.2rem;
  margin: 0 auto;
  width: 3rem;
  height: 0.45rem;
  border-radius: 0.45rem;
  background-color: rgb(48, 47, 47);
  color: #fff;
}
h2,
h3 {
  margin: 0 auto;
  width: 3rem;
  height: 0.5rem;
  border: 0.01rem solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h2 i {
  padding: 0 0.1rem;
}
h2 input {
  width: 1.8rem;
  height: 0.5rem;
  font-size: 0.18rem;
}
h3 {
  border-top: none;
}
h3 i {
  color: green;
  padding: 0 0.1rem;
}
h3 input {
  width: 1.6rem;
  height: 0.5rem;
  font-size: 0.18rem;
}
h4 {
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.14rem;
}
</style>